import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Table,Input,Button ,Modal,Row,Col,message,Select,Popconfirm,InputNumber,Divider,Pagination,DatePicker} from 'antd';
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
import styles from './index.less';
const Option = Select.Option;
import {TimeSpan} from '../../utils';
import moment from 'moment';
const Pages = ({ pointplan, dispatch, loading }) => {
    const columns = [
        {
            title: '计划编号',
            dataIndex: 'num',
        },
        {
            title: '计划名称',
            dataIndex: 'name',
        },
        {
            title: '计划类型',
            dataIndex: 'type',
            render:text => text && text == '0'?'天':text == '1'?"周":"月",
        },
        {
            title: '巡检路路线',
            dataIndex: 'route_name',
            render: (text,record) => <a onClick={()=> {
                localStorage.setItem('hrefid',text);
                dispatch({type:'app/goToPath',payload:'pointroad'});
            }}>{text}</a>,
        },
        {
            title: '执行状态',
            dataIndex: 'state',

        },
        {
            title: '操作',
            dataIndex: 'option',
            render: (text,record) => <a onClick={()=>{
                dispatch({type:'app/goToPath',payload:'Production'});
            }}>查看巡检记录</a>,
        },
        // {
        //     title: '操作',
        //     dataIndex: 'option',
        //     render: (text,record) =><div>
        //         <Popconfirm title="确定移除?" onCancel={()=>{}} onConfirm={
        //             ()=> dispatch({type:"pointplan/deletePointplan",payload:{id:record.id}})
        //         } okText="是" cancelText="否">
        //             <a style={{color:"red"}}>删除</a>
        //         </Popconfirm>
        //         <Divider type="vertical" />
        //         <a onClick={()=>{
        //             dispatch({type:"pointplan/inputOut",payload:{view:true,record:record}});
        //             dispatch({type:"pointplan/newpost"});
        //         }}>修改</a>
        //     </div>,
        // },
    ];
    let {selectedRowKeys} = pointplan;
    const rowSelection = {
        selectedRowKeys,
        onChange: (selectedRowKeys) => {
            console.log('selectedRowKeys changed: ', selectedRowKeys);
            dispatch({type:"pointplan/save",payload:{selectedRowKeys:selectedRowKeys}});
        },
    };
    return(
        <div className={styles.container}>
            <PagesGET dispatch={dispatch} {...pointplan} loading={loading.global}/>
            <Table
                rowSelection={rowSelection}
                columns={columns}
                rowKey={id=>id.id}
                pagination={false}
                loading={loading.global}
                size="small"
                dataSource={pointplan.getPointplanData || null} />
            <Pagination current={pointplan.pages} showTotal={total => `共计 ${total} 条`}
                style={{float: 'right', margin: 10}} size="small" total={pointplan.total}
                onChange={pages => { !loading.global && dispatch({type:'pointplan/inputOut',payload:{pages:pages}});}}/>
        </div>
    );
};


class PagesGET extends React.Component {


    constructor (props) {
        super(props);
        this.state = {
            item_num: "",
            item_name :"",
            name: '',
            num:'',
            isPF:"",
            is_cal_score:'',
            route:'',
            startTime:new Date(),
            endTime:new Date(),
        };
    }

    // 实例化生命周期函数1
    componentWillMount () {
        //判断是否登录
        this.props.dispatch({type:"pointplan/getPointplan",payload:{
            num: "",
            name :"",
            type:'',
            pageNumber :1,
            pageSize :10,
        }});
        this.props.dispatch({type:"pointplan/newpost"});
    }

    render (){

        let { pages,record,view ,dispatch ,FZR,XJLX,loading} = this.props;
        return (
            <div className={styles.containerit}>
                <div>
                    <Button type='primary' style={{margin:10}} onClick={()=>{
                        dispatch({type:"pointplan/inputOut",payload:{view:true,record:{}}});
                        dispatch({type:"pointplan/newpost"});
                        this.setState({
                            nameADD:'',
                            numADD :'',
                            is_cal_score:'',
                            route:'',
                            isPF:'',
                            startTime:TimeSpan(Date.parse(new Date())),
                            endTime:TimeSpan(Date.parse(new Date())),
                            FZR:[],
                        });
                    }}>新增巡检计划</Button>
                    <Button type='primary' style={{margin:10}} onClick={()=>{}}>执行计划</Button>
                    <Button type='primary' style={{margin:10}} onClick={()=>{}}>停止执行计划</Button>
                </div>
                <Input value={this.state.item_num } placeholder="巡检计划名称" style={{margin:10,width:256}} onChange={e=>this.setState({item_num :e.target.value})}/>
                {/*<Input value={this.state.item_name } placeholder="巡检计划编号" style={{margin:10,width:256}} onChange={e=>this.setState({item_name   :e.target.value})} />*/}
                <Select placeholder="巡检线路" value={this.state.is_cal_score1 || undefined} style={{margin:10,width:256}} onChange={value=>{
                    this.setState({
                        is_cal_score2:value,
                    });
                }}>
                    <Option value="0">全部</Option>
                    {XJLX && XJLX.map(item =>{
                        return <Option key={item.id} value={item.id}>{item.route_name}</Option>;
                    })}
                </Select>
                <Select placeholder="计划执行状态" value={this.state.is_cal_score1 || undefined} style={{margin:10,width:256}} onChange={value=>{
                    this.setState({
                        is_cal_score1:value,
                    });
                }}>
                    <Option value="">全部</Option>
                    <Option value="1">执行中</Option>
                    <Option value="2">未执行</Option>
                </Select>

                <Button type='primary' onClick={()=>{
                    let {item_num,is_cal_score2,is_cal_score1} = this.state;
                    this.props.dispatch({type:"pointplan/getPointplan",payload:{
                        num:item_num,
                        name :is_cal_score2,
                        type:is_cal_score1,
                        pageNumber :pages,
                        pageSize :10,
                    }});
                }
                }>查询</Button>
                <Button style={{marginLeft:10}} onClick={()=>{
                    this.setState({
                        item_num:'',
                        is_cal_score2 :'',
                        is_cal_score1:'',
                    });
                }}>重置</Button>

                <Modal
                    title={record.id?"修改巡检计划":"添加巡检计划"}
                    width={600}
                    visible={view}
                    confirmLoading={loading}
                    onOk={()=>{
                        let {nameADD,numADD,is_cal_score,route,startTime,endTime,isPF,FZRADD,isnum} = this.state;
                        if(nameADD && is_cal_score && route && numADD && startTime && endTime && isPF && FZRADD && isnum){
                            let body ={
                                name: nameADD,
                                num:numADD,
                                type:is_cal_score,
                                route_id:route,
                                interval:isnum,
                                is_cal_score:isPF,
                                start_time:startTime,
                                end_time:endTime,
                                user_id:FZRADD,
                            };
                            if(record.id){
                                body.id = record.id;
                            }
                            dispatch({type:record.id?"pointplan/putPointplan":"pointplan/postPointplan",payload:body});
                        }else{
                            message.error('请填写完整！');
                        }
                    }}
                    onCancel={()=>{
                        dispatch({type:"pointplan/inputOut",payload:{view:false,record:{}}});
                    }}>
                    <Row>
                        <Col span={6}><span><span style={{color:'red',marginLeft:50}}>*</span>计划名称:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 340, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({nameADD: e.target.value})}
                                value={this.state.nameADD}
                                placeholder="计划名称"/>
                        </Col>
                        <Col span={6}><span><span style={{color:'red',marginLeft:50}}>*</span>巡检路线:</span></Col>
                        <Col span={14}>
                            <Select value={this.state.route || '巡检路线' } style={{width: 340, marginBottom: 10, marginTop: -4}}
                                // mode="multiple"
                                onChange={value=>{
                                    this.setState({
                                        route:value,
                                    });
                                }}>
                                {XJLX && XJLX.map(item =>{
                                    return <Option key={item.id} value={item.id}>{item.route_name}</Option>;
                                })}
                            </Select>
                        </Col>
                        <Col span={6}><span><span style={{color:'red',marginLeft:50}}>*</span>执行时间:</span></Col>
                        <Col span={14}>
                            <RangePicker value={[moment(this.state.startTime, 'YYYY/MM/DD'), moment(this.state.endTime, 'YYYY/MM/DD')]}
                                style={{marginBottom: 10, marginTop: -4,width:340}}
                                onChange={(date,dateString)=>{
                                    this.setState({
                                        startTime:dateString[0],
                                        endTime:dateString[1],
                                    });
                                }} />
                        </Col>
                        <Col span={6}><span><span style={{color:'red',marginLeft:50}}>*</span>计划类型:</span></Col>
                        <Col span={14}>
                            <Select value={this.state.is_cal_score? this.state.is_cal_score:"请选择"} style={{width: 340, marginBottom: 10, marginTop: -4}} onChange={value=>{
                                this.setState({
                                    is_cal_score:value,
                                });
                            }}>
                                <Option value="0">天</Option>
                                <Option value="1">周</Option>
                                <Option value="2">月</Option>
                            </Select>
                        </Col>
                        <Col span={6}><span><span style={{color:'red',marginLeft:50}}>*</span>执行间隔:</span></Col>
                        <Col span={14}>
                            每<InputNumber style={{width: 50, margin: 10, marginTop: -4}} onChange={value => {
                                this.setState({isnum:value});
                            }} value={this.state.isnum}/>
                            {this.state.is_cal_score == '0'?'天':this.state.is_cal_score == '1'?"周":"月"}
                        </Col>
                        <Col span={6}><span><span style={{color:'red',marginLeft:50}}>*</span>计划编号:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 340, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({numADD: e.target.value})}
                                value={this.state.numADD}
                                placeholder="计划编号"/>
                        </Col>
                        <Col span={6}><span><span style={{color:'red',marginLeft:24}}>*</span>是否计算评分:</span></Col>
                        <Col span={14}>
                            <Select value={this.state.isPF? this.state.isPF:"请选择"} style={{width: 340, marginBottom: 10, marginTop: -4}} onChange={value=>{
                                this.setState({
                                    isPF:value,
                                });
                            }}>
                                <Option value="0">是</Option>
                                <Option value="1">否</Option>
                            </Select>
                        </Col>
                        <Col span={6}><span><span style={{color:'red',marginLeft:50}}>*</span>执行人员:</span></Col>
                        <Col span={14}>
                            <Select mode="multiple" value={this.state.FZRADD } placeholder="执行人员" style={{width: 340, marginBottom: 10, marginTop: -4}}
                                // mode="multiple"
                                onChange={value=>{
                                    this.setState({
                                        FZRADD:value,
                                    });
                                }}>
                                {FZR && FZR.map(item =>{
                                    return <Option key={item.id} value={item.id}>{item.name}</Option>;
                                })}
                            </Select>
                        </Col>
                    </Row>
                </Modal>
            </div>
        );
    }

    componentWillReceiveProps (nextProps) {
        if (nextProps.record.id !== this.props.record.id) {
            let {name,num,type,route_id,is_cal_score,start_time,end_time,user_id} = nextProps.record;
            let FZRADD = [];
            user_id && user_id.map(item =>{
                FZRADD.push(item.id);
            });
            this.setState({
                nameADD: name,
                numADD:num,
                is_cal_score:type,
                route:route_id,
                startTime:start_time,
                endTime:end_time,
                isPF:is_cal_score,
                FZRADD:FZRADD,
            });
        }
        if(nextProps.pages !== this.props.pages){
            let {item_num,item_name} = this.state;
            this.props.dispatch({type:"pointplan/getPointplan",payload:{
                num:item_num,
                name :item_name,
                type:'',
                pageNumber :nextProps.pages ==0?1:nextProps.pages,
                pageSize :10,
            }});
        }
    }
}
Pages.propTypes = {
    pointplan: PropTypes.object,
    loading: PropTypes.object,
    dispatch: PropTypes.func,
};

export default connect(({ pointplan, loading }) => ({ pointplan, loading }))(Pages);
